<template>
  <div class="box-dialog">
    <el-dialog
      title="收货地址"
      :visible.sync="dialogTableVisible"
      :width="width"
      top="10vh"
      class="dialog"
      destroy-on-close
      :append-to-body="true"
    >
      <template #title>
        <span class="dialog-title">{{ title }}</span>
      </template>
      <div class="dialog-box">
        <slot name="content"></slot>
      </div>
      <slot name="footer">
        <div slot="footer" class="dialog-footer">
          <slot name="btn"></slot>
          <el-button
            class="confirm-btn"
            @click.prevent="confirm"
            v-if="clickBtn != 'show'"
            >{{
              clickBtn == 'add'
                ? '提交'
                : clickBtn == 'determine'
                ? '确认'
                : '保存'
            }}
          </el-button>
          <el-button @click="cancel" class="center-btn">
            {{ clickBtn == 'show' ? '返回' : '取消' }}</el-button
          >
        </div>
      </slot>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogIndex',
  props: {
    showDialog: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '50%'
    },
    title: String,
    clickBtn: {
      // show不显示左侧按钮，add显示提交，determine显示确定
      type: String,
      default: 'show'
    }
  },
  data() {
    return {}
  },
  model: {
    prop: 'showDialog',
    event: 'input'
  },

  components: {},

  computed: {
    dialogTableVisible: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },

  created() {},

  mounted() {},

  methods: {
    confirm() {
      this.$emit('confirm')
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    background-color: #1588f3;
    color: #fff;
    .el-icon-close {
      color: #fff;
    }
  }

  .el-dialog__footer {
    background-color: #eff1f8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    .el-button {
      padding: 9px 20px;
    }
    .confirm-btn {
      background-color: #1588f3;
      color: #fff;
    }
  }

  .el-dialog {
    display: flex;
    display: -ms-flex; /* 兼容IE */
    flex-direction: column;
    -ms-flex-direction: column; /* 兼容IE */
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    min-width: 600px;
    border: 1px solid #1588f3;
  }
  .el-dialog .el-dialog__body {
    max-height: 100%;
    flex: 1;
    -ms-flex: 1 1 auto; /* 兼容IE */
    overflow-y: auto;
    overflow-x: hidden;
    // background-color: #eff1f8;
  }

  .el-dialog__wrapper {
    /*隐藏ie和edge中遮罩的滚动条*/
    overflow: hidden;
  }
}
</style>
